<template>
  <div class="table-box-content">
    <el-button type="primary" @click="openCard">打开TabCard</el-button>
    <el-button type="primary" @click="closeCard">关闭TabCard</el-button>
    <SideFrame ref="sideFrame" />
  </div>
</template>

<script setup lang="ts">
import SideFrame from "@/components/SideFrame.vue";
import { ref, nextTick, h } from "vue";
import { ElMessage } from "element-plus";

const sideFrame = ref();
const openCard = () => {
  if (sideFrame.value.frameDia) {
    ElMessage({
      message: "请勿重复打开",
      type: "warning",
    });
  } else {
    sideFrame.value.openCard();
  }
};
const closeCard = () => {
  console.log();
  if (sideFrame.value.frameDia) {
    sideFrame.value.closeCard();
  } else {
    ElMessage({
      message: h("p", null, [
        h("span", null, "请先打开 "),
        h("i", { style: "color: teal" }, "TabCard"),
      ]),
    });
  }
};
</script>

<style scoped>
</style>
